import { Component, Emit, Prop, Ref, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'

import toNative from '@/utils/toNative'
import styles from './style.module.scss'
import { Image, ImagePreviewGroup } from 'ant-design-vue'
import { ZoomInOutlined } from '@ant-design/icons-vue'
import { BtnTypeEnum, type BtnType } from './PreviewImageOrPdf'

@Component
export class ImageViewButton extends Render {
    @Prop({ default: '' }) src!: string | string[]
    @Prop({ default: '点击查看' }) text?: string
    @Prop({ default: 'default'}) type?: BtnType
    @Prop({ default: false }) hover?: boolean

    showPreview = false

    get previewList() {
        return Array.isArray(this.src) ? this.src : [this.src]
    }

    onShowPreview() {
        this.showPreview = true
    }

    render() {
        return (
            <>
                {this.showPreview && (
                    <ImagePreviewGroup preview={{
                        visible: this.showPreview,
                        onVisibleChange: (visible) => {
                            this.showPreview = visible
                        }
                    }}>
                        {this.previewList.map((src, index) => (
                            <Image
                                key={index}
                                class={`${styles.reset} !inline-flex w-full h-full z-1 opacity-0 cursor-pointer`}
                                src={src}
                            ></Image>
                        ))}
                    </ImagePreviewGroup>
                )}
                <div
                    class={`inline-block cursor-pointer text-${this.type && BtnTypeEnum[this.type as keyof typeof BtnTypeEnum]} ${this.hover ? 'hover:text-blue-100': ''}`}
                    onClick={this.onShowPreview}
                >
                    <span class="mr-6px">{this.text}</span>
                    <ZoomInOutlined />
                </div>
            </>
        )
    }
}

export default toNative<{ src: string | string[]; text?: string; type?: BtnType; hover?: boolean }, {}>(ImageViewButton)
